<template>
    <div class="box">
      <header class="header">
        <van-search
          v-model="value"
          show-action
          label="搜索"
          placeholder="请输入搜索关键词"
          @click-input="$router.push('/search')"
        >
          <template #left>
            <van-icon name="bars" size="20" />
          </template>
          <template #action>
            <van-icon name="setting" size="20" />
          </template>
        </van-search>
      </header>
      <main class="content">
        <van-swipe :autoplay="3000" lazy-render>
          <van-swipe-item v-for="image in images" :key="image">
            <img :src="image" style="width:100%;height:200px;"/>
          </van-swipe-item>
        </van-swipe>
        <van-grid>
  <van-grid-item icon="https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg" text="水果" />
  <van-grid-item icon="https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg" text="电器" />
  <van-grid-item icon="https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg" text="衣服" />
  <van-grid-item icon="https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg" text="充值" />
</van-grid>
      </main>
    </div>
</template>

<script setup>
  const images = [
      'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',
      'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',
    ];
</script>